<template>
<!-- //表单区域 -->
   <div class="myform">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" :label-position="labelPosition" ref="choicForm">
    <el-form-item label="学科">
    <el-select v-model="formInline.subjectid" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for="item in subjectsList" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="二级目录">
    <el-select v-model="formInline.empyt" placeholder="请选择">

    </el-select>
  </el-form-item>
  <el-form-item label="标签">
    <el-select v-model="formInline.empyt" placeholder="请选择">
    </el-select>
  </el-form-item>
  <el-form-item label="关键字">
    <el-input v-model="formInline.keyword" placeholder=""></el-input>
  </el-form-item>
   <el-form-item label="试题类型">
    <el-select v-model="formInline.questionType" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for="(item,index) in questionType" :key="index"></el-option>

    </el-select>
  </el-form-item>
     <el-form-item label="难度">
    <el-select v-model="formInline.difficulty" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for="(item,index) in difficulty" :key="index"></el-option>

    </el-select>
  </el-form-item>
  <el-form-item label="方向">
    <el-select v-model="formInline.direction" placeholder="请选择">
      <el-option :label="item" :value="item" v-for="(item,index) in direction" :key="index"></el-option>
    </el-select>
  </el-form-item>
     <el-form-item label="录入人">
    <el-select v-model="formInline.creatorID" placeholder="请选择">
      <el-option :label="item.username" :value="item.id" v-for="item in username" :key="item.id"></el-option>

    </el-select>
  </el-form-item>
   <el-form-item label="题目备注">
    <el-input v-model="formInline.user" placeholder=""></el-input>
  </el-form-item>
   <el-form-item label="企业简称">
    <el-input v-model="formInline.shortName" placeholder=""></el-input>
  </el-form-item>
    <el-form-item label="城市" class="city">
    <el-select v-model="formInline.provinces" placeholder="请选择" >
      <el-option :label="item" :value="item" v-for="(item,index) in provinces()" :key="index"></el-option>
    </el-select>
    <el-select v-model="formInline.citys" placeholder="请选择" >
      <el-option :label="item" :value="item" v-for="(item,index) in citys" :key="index"></el-option>
    </el-select>
  </el-form-item>

 <div >
    <el-form-item>
     <el-button  @click="doClear">清除</el-button>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
 </div>
</el-form>
 </div>

</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice } from '@/api/hmmm/questions.js'
import {list as userlist } from '@/api/base/users.js'
import { simple } from '@/api/hmmm/subjects.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
export default {
  data () {
    return {
      labelPosition: 'right',
      formInline: {
        empyt: '',
        subjectid: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        provinces: '',
        citys: ''
      },
      subjectsList: [],
      difficulty: difficulty,
      questionType,
      direction,
      username: [],
      provinces,
      citys: []

    }
  },
  methods: {
    // 提交搜索请求
    onSubmit () {
      choice({ page: 1, pagesize: 10, subjectID: this.formInline.subjectid, keyword: this.formInline.keyword }).then(res => {
        const dataRequest = { subjectID: this.formInline.subjectid, keyword: this.formInline.keyword }
        this.$emit('changenewtableList', [res.data.items, dataRequest])
        console.log(res.data.items)
      })
    },

    // 获取用户列表
    getuserList () {
      userlist({ page: 1, pagesize: 100000 }).then(res => {
        this.username = res.data.list
      })
    },
    // 清除表单的操作
    doClear () {
      this.formInline = {
        empyt: '',
        subjectName: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        provinces: '',
        citys: ''
      }
      this.$emit('clearQuery')
    },
    // 获取学科id,渲染学科
    getSubID () {
      simple({ subjectName: '大数据' }).then(res => {
        this.subjectsList = res.data
        console.log(res)
      })
    }

  },
  mounted () {
    this.getuserList()
    this.getSubID()
  },
  watch: {
    formInline: {
      deep: true,
      handler (val) {
        if (val.provinces) {
          this.citys = citys(val.provinces)
        }
      }
    }

  }

}
</script>

<style scoped lang='scss'>
.city .el-select {
  width: 102px;

}
.el-form{
  display: flex;
  flex-flow:row wrap;
  // justify-content: center;
  align-items: center;

justify-content: space-between;

}
.el-form-item {
  width: 280px;
  display: flex;
  justify-content: flex-end;
}
.el-select{
  width: 206px;
}

.myform{
  margin-top: 10px;
  padding: 0 20px;
}
</style>
